<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Change CSS Value using Javascript</title>
<style>
h1 {
    margin:0;
    padding:0;
}
#mySpan  {
    color: #ff00ff;
     font-size:30px;
}
</style>
<style type="text/css">
#myColor  {
    width:300px;
    font:bold 18px Arial;
    text-align:center;
    border:1px solid red;
    height:30px;
}
</style>
<script type="text/javascript">
function SetColorToRed ()  {
    var span  = document.getElementById ("mySpan");
    span.style.color  = "#ff0000";
}
function SetColorToBlue ()  {
    var span  = document.getElementById ("mySpan");
    span.style.color  = "#0000ff";
}
function ScrollContent ()  {
    var span  = document.getElementById ("mySpan");
    // works if the element only contains pure text
     var oldText  = span.innerHTML;
    newText  = oldText.substr (10)  + oldText.substr (0, 10);
    span.innerHTML  = newText;
}
</script>
<script type="text/javascript">
function SetColorPicker1 ()  {
    var input  = document.getElementById ("myColor");
    input.style.backgroundColor  = "#f00ff0";
    input.style.display  = "block";
    input.style.width  = "400px";
    input.style.opacity  = "0.5";
}
function SetColorPicker2 ()  {
    var input  = document.getElementById ("myColor");
    input.style.backgroundColor  = "#ff0000";
    input.style.display  = "block";
    input.style.width  = "600px";
    input.style.opacity  = "1.0";
}
</script>
</head>
<body>
<table cellpadding="0px" cellspacing="0px" style="width:100%">
<tr height="100">
	<td align="center" valign="middle" style="padding-top:15px; padding-bottom:10px;">
<input id="myColor" value=onMousemove style="font-size:30px;">
<h1 align=center>onMousemove</h1>
		<button onmousemove="SetColorPicker1 ()">SetColorPicker1</button>
		<button onmousemove="SetColorPicker2 ()">SetColorPicker2</button>
		<br/><br/>
		<input id="myColor" value="Change value using javascript"/>
	</td>
</tr>
<tr height="100">
	<td align="center" valign="middle" style="padding-top:15px; padding-bottom:10px;">
<h1 align=center>onClick</h1>
		<button onclick="SetColorToRed ()">Set color to red</button>
		<button onclick="SetColorToBlue ()">Set color to Blue</button>
		<button onclick="ScrollContent ()">Scroll the contents</button>
	</td>
</tr>
<tr>
	<td align="center" valign="middle" style="padding-top:15px; padding-bottom:10px;">
		<span id="mySpan">
		A simple span. </span>
	</td>
</tr>
<tr>
	<td align="center" class="copyright">
		<a target="_blank" rel="nofollow" href="http://www.dottoro.com/tou.php">&copy; 2011 Dottoro.com. All rights reserved. Terms of use.</a>
	</td>
</tr>
</table>

<div style="padding:20px;margin:10px auto;width:95%;background:#eee;min-height:200px;border:1px solid #555;">
http://help.dottoro.com/ljkmgbpx.php
<h2>Javascript onmousemove</h2>
<pre>&lt;style type="text/css"&gt;
#myColor {
    width:300px;
    font:bold 18px Arial;
    text-align:center;
    border:1px solid red;
    height:30px;
}
&lt;/style&gt;


&lt;script type="text/javascript"&gt;
function SetColorPicker1 () {
    var input =document.getElementById ("myColor");
    input.style.backgroundColor ="#f00ff0";
    input.style.display ="block";
    input.style.width ="400px";
    input.style.opacity ="0.5";
}
function SetColorPicker2 () {
    var input =document.getElementById ("myColor");
    input.style.backgroundColor ="#ff0000";
    input.style.display ="block";
    input.style.width ="600px";
    input.style.opacity ="1.0";
}
&lt;/script&gt;


	&lt;button onmousemove=&quot;SetColorPicker1 ()&quot;&gt;SetColorPicker1&lt;/button&gt;
	&lt;button onmousemove=&quot;SetColorPicker2 ()&quot;&gt;SetColorPicker2&lt;/button&gt;
	&lt;br/&gt;&lt;br/&gt;
	
        &lt;input id=&quot;myColor&quot; value=&quot;Change value using javascript&quot;/&gt;</pre>


<h2>Javascript onClick</h2>

<pre>&lt;style&gt;
#mySpan {
       color: #ff00ff; 
       font-size:30px;
}
&lt;/style&gt;


&lt;script type="text/javascript"&gt;
        function SetColorToRed () {SetColorToBlue
            var span = document.getElementById ("mySpan");
            span.style.color = "#ff0000";
        }
        function SetColorToBlue () {
            var span = document.getElementById ("mySpan");
            span.style.color = "#0000ff";
        }
        function ScrollContent () {
            var span = document.getElementById ("mySpan");
                // works if the element only contains pure text
            var oldText = span.innerHTML;
            newText = oldText.substr (10) + oldText.substr (0, 10);
            span.innerHTML = newText;
        }
&lt;/script&gt;


&lt;h1 align=&#39;center&#39;&gt;onClick&lt;/h1&gt;
        &lt;button onclick=&quot;SetColorToRed ()&quot;&gt;Set color to red&lt;/button&gt;
        &lt;button onclick=&quot;SetColorToBlue ()&quot;&gt;Set color to Blue&lt;/button&gt;
        &lt;button onclick=&quot;ScrollContent ()&quot;&gt;Scroll the contents&lt;/button&gt;

&lt;span id=&quot;mySpan&quot;&gt;
A simple span. 
&lt;/span&gt;</pre>
</div>


<style>
h2{font:bold 22px Times New Roman;text-align:center;}
pre{margin:10px auto;padding:20px 0;width:100%;font:normal 14px Courier New;line-height:18px;text-align:left;white-space:pre-wrap;padding-bottom:20px;border-bottom:5px double #666;border-top:5px double #666;}
</style>

</body>
</html>